<script>
import Wenxie from './components/Wenxie.vue'
import Xiawen from './components/Xiawen.vue'
import Yuxia from './components/Yuxia.vue'

export default {
  data() {
    return {
      currentPig: 'Wenxie',
      pigs: [
        'Wenxie',
        'Xiawen',
        'Yuxia'
      ]
    }
  },
  components: {
    Wenxie,
    Xiawen,
    Yuxia
  }
}
</script>



<template>

  <div class="xzz">
    <button v-for="pig in pigs" :key="pig" :class="['pig-button', { active: currentPig === pig }]" @click="currentPig = pig">
      {{ pig }}
    </button>
    <component :is="currentPig" class="pig"></component>
  </div>

</template>

<style>
.xzz {
  font-family: sans-serif;
  border: 150px dashed rgba(112, 41, 204, 0.247);
  border-radius: 2px;
  padding: 20px 30px;
  margin-top: 1em;
  margin-bottom: 40px;
  user-select: none;
  overflow-x: auto;
}

.pig-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 2px solid rgb(219, 18, 176);
  cursor: pointer;
  background: #c0bcd6;
  margin-bottom: -1px;
  margin-right: -1px;
}

.pig-button:hover {
  background: #413636;
}

.pig-button.active {
  background: #ce8989;
}
</style>